<%@page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>YUI grid</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/paginator/assets/skins/sam/paginator.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/scripts/yui/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/connection/connection-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/json/json-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/container/container_core-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/menu/menu-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/paginator/paginator-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/yui/build/datatable/datatable-min.js"></script>
<style>
 .add {
	  background: url("<%=request.getContextPath()%>/scripts/flexigrid/css/images/add.png" ) no-repeat center left;
}

 .delete {
	  background: url("<%=request.getContextPath()%>/scripts/flexigrid/css/images/close.png" ) no-repeat center left;
}
</style>
<style type="text/css">
 .yui-skin-sam .yui-dt-body { cursor:pointer; }  
  #single { margin-top:2em; }
</style>
</head>

<body class="yui-skin-sam">

<div id="x_grid"></div>

<script type="text/javascript">
  YAHOO.example.DynamicData = function() {
   
    var myColumnDefs = [ 
        {key:"productId", label:"产品ID", sortable:true},
        {key:"productName", label:"产品名称", sortable:true},
        {key:"productDate", label:"生产日期", sortable:true},
        {key:"price", label:"单价", sortable:true},
        {key:"quantity", label:"数量", sortable:true}
    ];
 
    var myDataSource = new YAHOO.util.DataSource("yui_product_json.jsp?");
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    myDataSource.responseSchema = {
        resultsList: "records",
        fields: [
            {key:"productId"},
            {key:"productName"},
            {key:"productDate"},
            {key:"price",parser:"number"},
            {key:"quantity",parser:"number"}
        ],
        metaFields: {
            totalRecords: "totalRecords"  
        }
    };
    
    // DataTable configuration
    var myConfigs = {
        initialRequest: "sort=productId&dir=asc&startIndex=0&results=15", // Initial request for first page of data
        dynamicData: true, // Enables dynamic server-driven data
        sortedBy : {key:"productId", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
        paginator: new YAHOO.widget.Paginator({ rowsPerPage:15 }) // Enables pagination 
    };
    
    // DataTable instance
    var myDataTable = new YAHOO.widget.DataTable("x_grid", myColumnDefs, myDataSource, myConfigs);
    // Update totalRecords on the fly with value from server
    myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
        oPayload.totalRecords = oResponse.meta.totalRecords;
        return oPayload;
    }

	var onContextMenuClick = function(p_sType, p_aArgs, myDataTable) {
            var task = p_aArgs[1];
            if(task) {
                // Extract which TR element triggered the context menu
                var elRow = this.contextEventTarget;
                elRow = myDataTable.getTrEl(elRow);

                if(elRow) {
                    switch(task.index) {
						case 0:     // create row upon confirmation
                             alert("create data...");
							break;
						case 1:     // update row upon confirmation
                            var oRecord = myDataTable.getRecord(elRow);
                            if(confirm("Are you sure you want to update product " +
                                    oRecord.getData("productId") + " (" +
                                    oRecord.getData("productName") + ")?")) {
                                 
                            }
							break;
                        case 2:     // Delete row upon confirmation
                            var oRecord = myDataTable.getRecord(elRow);
                            if(confirm("Are you sure you want to delete product " +
                                    oRecord.getData("productId") + " (" +
                                    oRecord.getData("productName") + ")?")) {
                                myDataTable.deleteRow(elRow);
                            }
							break;
                    }
                }
            }
        };

        var myContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu",
                {trigger:myDataTable.getTbodyEl()});
		myContextMenu.addItem("Create Item");
		myContextMenu.addItem("Update Item");
        myContextMenu.addItem("Delete Item");
        // Render the ContextMenu instance to the parent container of the DataTable
        myContextMenu.render("x_grid");
        myContextMenu.clickEvent.subscribe(onContextMenuClick, myDataTable);
     
    return {
        ds: myDataSource,
        dt: myDataTable
    };
        
  }();

</script>
</body>
</html>